<template>
  <div class="firm_detail" v-if="Object.keys(firmDetail).length !== 0">
    <nav-bar></nav-bar>
    <firm-item :firm-item="firmItem"></firm-item>
    <condition :conditions="conditions"></condition>
    <search-result class="content">
      <interview slot="result" :interview-data="firmDetail"></interview>
      <hot-list slot="hot" :hot-list="hotList"></hot-list>
    </search-result>
  </div>
</template>

<script>
  import NavBar from "components/content/navBar/NavBar";
  import FirmItem from "../firm/FirmItem";
  import Condition from "../../condition/Condition";
  import SearchResult from "../../searchResult/SearchResult";
  import Interview from "../../interview/Interview";
  import HotList from "../../hotList/HotList";

  import {getFirmArticle, Article, getFirmPosition, getArticleByPost} from "network/search";

  export default {
    name: "FirmDetail",
    components: {
      NavBar,
      FirmItem,
      Condition,
      SearchResult,
      Interview,
      HotList,
    },
    data() {
      return {
        firmDetail: [],
        conditions: [
          {
            title: '岗位',
            conditions: [],
            isShowInput: false
          },
          {
            title: '已选',
            conditions: {
              position: ''
            },
            isShowInput: false
          }
        ],
        hotList: [
          {
            rank: 1,
            content: '字节跳动'
          },
          {
            rank: 2,
            content: '百度'
          },
          {
            rank: 3,
            content: '腾讯'
          },
          {
            rank: 4,
            content: '字节跳动'
          },
          {
            rank: 5,
            content: '百度'
          },
          {
            rank: 6,
            content: '腾讯'
          },
          {
            rank: 7,
            content: '字节跳动'
          },
          {
            rank: 8,
            content: '百度'
          },
          {
            rank: 9,
            content: '哈哈哈'
          },
        ],
        conditionClick: null,
        position: '',
      }
    },
    watch: {
      position() {
        this.conditions[this.conditions.length - 1].conditions.position = this.position
      }
    },
    computed: {
      firmItem() {
        return {
          _id: this.$route.params.firmName,
          count: this.firmDetail.length
        }
      }
    },
    created() {
      new Promise((resolve, reject) => {
        getFirmArticle(this.$route.params.firmName).then(res => {
          const arr = []
          if (res.data.code) {
            res.data.data.map(item => {
              arr.push(new Article(item))
            })
          }
          this.firmDetail = arr
          resolve()
        })
      }).then(() => {
        getFirmPosition(this.firmDetail[0].firm).then(res => {
          console.log(res)
          if (res.data.code) {
            this.conditions[0].conditions = res.data.data
          }
        })
      })
    },
    mounted() {
      this.conditionClick = (condition) => {
        this.position = condition.conditionSelect
        getArticleByPost && getArticleByPost(this.$route.params.firmName, this.position).then(res => {
          console.log(res)
          const arr = []
          res.data.data.map(item => {
            arr.push(new Article(item))
          })
          this.firmDetail = arr
        })
      }
      this.$bus.$on('conditionClick', this.conditionClick)
    },
    beforeDestroy() {
      this.$bus.$off('conditionClick', this.conditionClick)
    },
  }
</script>

<style scoped>
  .firm_detail {
    width: 1100px;
    margin: 0 auto;
  }

  .content {
    margin-top: 20px;
  }
</style>
